@font-face
{
    font-family: 'DINPro';
    src: url(../font/DINPro.ttf);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.nav {
  position: relative;
  width: auto;
  display: inline-block;
  border: none;
}

.btn-nav {
  background: transparent;
  border: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  z-index: 99999;
}
.btn-nav:focus {
  outline: 0;
}

.icon-bar {
  display: block;
  background-color: #111111;
  height:4px;
  border-radius:10px;
  margin:2px 0;  
}


.btn-nav:hover .icon-bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #111111;
}

.nav-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: block;
  height: 100vh;
  z-index: 999;
}
.ser-content {
  position: absolute;
  width:calc( 100% - 6rem );
  top: 3rem;
  left: 0;
  right: 0;
  height: 4rem;
  border-bottom:1px #111111 solid;
}
.ser-content input{ float:left; width:calc( 100% - 2rem - 1px ); height:4rem; border:none; padding:0 1rem; color:#999; font-size:.8rem; outline: none;}

.nav-content ul{ float:left; width:calc( 100% - 2rem ); margin:0 1rem 1rem 1rem;}
.nav-content ul li{ float:left; width:33.3%; line-height:1.5rem;}
.nav-content ul li a{color:#999;}

.nav-content ul li:nth-child(1){ width:100%; text-align:left; margin-bottom:.5rem; line-height: 1rem;}
.nav-content ul li:nth-child(1) a{color:#111111;}

.nav-list {
  list-style: none;
  padding: 0;
  position: relative;
  margin-top:20px;
  width:20%;
}

.item-anchor:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: 0;
  z-index: 9;
  background: transparent;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.item-anchor {
  color: #111;
  font-size: .8rem;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
}
.nav-list li:nth-child(1) .item-anchor{font-weight:bold;}
.item-anchor:hover,
.item-anchor:focus {
  color: #111;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.item-anchor:hover:after,
.item-anchor:focus:after{
  width: 100%;
  background: #dcdcdc;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.nav-item {
  margin: 0 auto;
}

.animated {
  display: block;
}

.animated:hover .icon-bar,
.animated:focus .icon-bar{
  background-color: #111111;
}

.animated:focus {
  cursor: pointer;
  z-index: 9999;
}

/*.middle {
  margin: 0 auto;
}
*/
.icon-bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
  z-index: 999999;
}

.animated .icon-bar {
  z-index: 999999;
  background-color: #111111;
}

.animated .top {
  -webkit-transform: translateY(6px) rotateZ(45deg);
  -moz-transform: translateY(6px) rotateZ(45deg);
  -ms-transform: translateY(6px) rotateZ(45deg);
  -o-transform: translateY(6px) rotateZ(45deg);
  transform: translateY(6px) rotateZ(45deg);
}

.animated .bottom {
  -webkit-transform: translateY(-6px) rotateZ(-45deg);
  -moz-transform: translateY(-6px) rotateZ(-45deg);
  -ms-transform: translateY(-6px) rotateZ(-45deg);
  -o-transform: translateY(-6px) rotateZ(-45deg);
  transform: translateY(-6px) rotateZ(-45deg);
}

.icon-bar.middle {
width: 16px;
position:relative;
left:0.5rem;
}
.animated .middle {
width: 0;
}

@keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-webkit-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-moz-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-o-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

.showNav {
  -webkit-animation: showNav 1s ease forwards;
  -moz-animation: showNav 1s ease forwards;
  -o-animation: showNav 1s ease forwards;
  animation: showNav 1s ease forwards;
}
.showNav ul:nth-child(1){ margin-top:6rem;}
.nav-box{ border-right:1px #111111 solid; width:calc( 100% - 6rem - 1px ); height:calc( 100vh - 3rem ); margin-top:3rem; float:left; }

@keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-webkit-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-moz-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-o-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

.hideNav {
  -webkit-animation: hideNav 1s ease forwards;
  -moz-animation: hideNav 1s ease forwards;
  -o-animation: hideNav 1s ease forwards;
  animation: hideNav 1s ease forwards;
}


.hidden {
  display: none;
}

.tzz{ height:calc( 100vh - 3rem ); margin-top:3rem; width:6rem; color:#111111; float:left;}

.tzz-content{ float:left; width:38rem; height:0; margin-left:5.5rem; margin-top:6rem;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin:left top;
}

.tzz h4{ font-size:.8rem; float:left; height:6rem; width:13rem; }
.tzz h4 span{font-family: 'DINPro'; font-size: .8rem;}
.tzz h4 .yuan{ position:relative; font-size: 3rem; line-height: 1rem; margin-top: 1rem; }
.tzz h4 .yuan a{ text-decoration: none;}
.tzz h4 .yuan .num{ font-size:3rem; font-family: 'DINPro';}
.tzz h4 .yuan .unit{ font-size:1rem;}
.tzz .data{ height:0; width:0; float:left;}
.tzz .data tr:nth-child(1){ font-size:.8rem; color:#dcdcdc; padding-right:1rem; font-family: 'DINPro'; height:1.5rem;}
.tzz .data tr:nth-child(2){ font-size:.8rem; font-weight:700; color:#999;}
.tzz .data tr:nth-child(3){ font-size:1.5rem; color:#111111; font-weight:700;}
.tzz .data td{ padding-right:1rem; font-family: 'DINPro'; white-space:nowrap;}
.red{ color:red; font-family: DINPro;}
.red a{ color:red; font-family: DINPro;}
.green{ color:green; font-family: DINPro;}
.green a{ color:green; font-family: DINPro;}
.yuan .green .up:after{content: "↓";}
.yuan .red .up:after{content: "↑";}